<template>
    <div>
        <div class="foot">
           <div class="shop" @click="jump1()">
               <image :src="src1" class="shop_img1"></image>
               <text class="shop_text1">店铺</text>
           </div>
           <div class="pay" @click="jump2()">
               <image :src="src2" class="shop_img2"></image>
               <text class="shop_text2">收款</text>
           </div>
           <div class="news" @click="jump3()">
               <image :src="src3" class="shop_img3"></image>
               <text class="shop_text3">消息</text>
           </div>
           <div class="mine" @click="jump4()">
               <image :src="src4" class="shop_img4"></image>
               <text class="shop_text4">我的</text>
           </div>
        </div>
    </div>
</template>
<style scoped>
    .foot{
        flex-direction: row;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 88px;
        justify-content: space-around;
        box-sizing: border-box;
        box-shadow: 2px 1px 1px #ccc;
        background-color: #fff;
        
    }
    .shop_img1,.shop_img2,.shop_img3,.shop_img4{
        width: 38px;
        height: 40px;
        background-color: silver;
    }
    .shop,.pay,.news,.mine{
        width: 80px;
        height: 88px;
        padding-top: 5px;
        align-items: center;
    }
    .shop_text1,.shop_text2,.shop_text3,.shop_text4{
        font-size: 13px;
        width: 80px;
        text-align: center;
        justify-content: center;
        margin-top: 6px;
        color: #999;
    }
</style>
<script>
export default {
    data () {
        return {
           src1: '',
           src2: '',
           src3: '',
           src4: '',
        }
    },
    methods: {
        // 点击店铺
      jump1(){
        console.log('点击店铺');
      },
        //点击收款
      jump2(){
        console.log('点击收款');
      },
        //点击消息
      jump3(){
        console.log('点击消息');
      },
        //点击我的
      jump4(){
        console.log('点击我的');
      }
    }
}
</script>